{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>base.html</title>
    <!-- 引入 jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <!-- 引入自定义CSS， -->
    <link rel="stylesheet" href="{% static 'CSS/styles.css' %}">

</head>

<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">图书管理系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">有趣的知识 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">友情链接</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">获取更多 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        {# 打开新页面的时候是打开新的标签页 target_blank #}
                        <li><a href="https://www.cnblogs.com/dream-ze/p/17840578.html" target="_blank">博客园</a></li>
                        <li role="separator" class="divider"></li>
                        {# 没有配置target_blank时，原页面跳转新网址 #}
                        <li><a href="https://blog.csdn.net/Crescen7?spm=1000.2115.3001.5343">CSDN</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="https://juejin.cn/">掘金</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    {% if user_obj %}
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    {% else %}
                        <li><a href="#">注册</a></li>
                        <li><a href="#">登录</a></li>
                    {% endif %}

                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid"></div>
<div class="row">
    <div class="col-md-10 col-md-offset-1">
    {% block content_main_outer %}
        {# 巨幕内部 #}
        <div class="jumbotron">
            {# 巨幕大标题 #}
            <h1 class="text-center">世界上最大的图书管理平台</h1>
            <br>
            {# 轮播图 #}
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    {# book_all.count ---> for forloop #}
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">

                        <div class="item active">
                            <img src="https://pic.netbian.com/uploads/allimg/240626/203002-1719405002f79c.jpg"
                                 alt="...">
                            <div class="carousel-caption">
                                ...
                            </div>
                        </div>
                        <div class="item ">
                            <img src="https://pic.netbian.com/uploads/allimg/240619/230528-1718809528d820.jpg"
                                 alt="...">
                            <div class="carousel-caption">
                                ...
                            </div>
                        </div>
                        <div class="item ">
                            <img src="https://pic.netbian.com/uploads/allimg/240630/195724-17197486444870.jpg"
                                 alt="..." >
                            <div class="carousel-caption">
                                ...
                            </div>
                        </div>
                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            {% for book_obj in book_all %}
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail-container">
                        <div class="thumbnail">
                            <img src="/static/{{ book_obj.cover }}" alt="...">
                            <div class="caption">
                                <h3 class="text-center">{{ book_obj.title }}</h3>
                                <p>{{ book_obj.desc }}</p>
                                <p>
                                    <a href="#" class="btn btn-info" role="button">{{ book_obj.price }} $</a>
                                    <a href="#"
                                       class="btn btn-success"
                                       role="button">购买</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endblock %}
    </div>
</div>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</body>
</html>